<template>
  <div class="root">
    <van-pull-refresh v-model="isLoading" success-text="刷新成功" @refresh="onRefresh">
      <van-row v-for="item in menulist" :key="item.id" @click="addclick(item.id)">
        <van-col span="4">
          <div class="tp">
            <img :src="item.img_url" />
          </div>
        </van-col>
        <van-col span="20">
          <div class="tt van-ellipsis">{{item.title}}</div>
          <span class="left">发表时间：{{item.add_time | dateFormat}}</span>
          <span class="right">点击：{{item.click}}</span>
        </van-col>
        <van-divider />
      </van-row>
      <div style="height:50px"></div>
    </van-pull-refresh>
  </div>
</template>

<script>
import Vue from 'vue'
import { Divider } from 'vant'
import { mapMutations } from 'vuex'

Vue.use(Divider)
export default {
  data () {
    return {
      count: 0,
      isLoading: false,
      menulist: []
    }
  },
  created () {
    this.getMenList()
  },
  methods: {
    ...mapMutations(['setNewsListId']),
    addclick (id) {
      this.setNewsListId(id)
      this.$router.push('/newsinfo')
    },
    onRefresh () {
      setTimeout(() => {
        this.$toast('刷新成功')
        this.isLoading = false
        this.count++
      }, 500)
    },
    async getMenList () {
      const { data: res } = await this.$http.get('/api/getnewslist')
      console.log(res)
      this.menulist = res.message
    }
  }
}
</script>

<style scoped lang="less">
.root {
  margin-top: 47px;
}
img {
  height: 50px;
  width: 50px;
}
span {
  font-size: 12px;
  color: blue;
}
.left {
  float: left;
}
.right {
  float: right;
  margin-right: 10px;
}
.tt {
  width: 100%;
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
}
</style>
